<!DOCTYPE html>
<html>
<head>
	<title>列表渲染</title>
	<script type="text/javascript" src="./vue.js"></script>
</head>
<body>	
	<div id="app">
		<div v-for="item in list">{{item}}</div>
		<div v-for="(value,key,index) of objecs">{{value}}--{{key}}--{{index}}</div>
	</div>
	<script>
		//直接通过下标修改数组元素并不会动态影响渲染
		//数组中vue会重新渲染的方法有pop push shift unshift splice sort reverse
		//数组遍历时，每条记录设置：key（唯一值，不推荐使用index），能大幅度的提高vue的渲染性能
		//直接改变引用也能引起数据的变化，app.list = []的方式
		//通过vue的setter方法也能引起的数据的更新变化，Vue.set(list , 5, "E")/app.$set(list , 5 , "E")

		var app = new Vue({
			el : '#app' ,
			data : {
				list : ['A' , 'B' , 'C' , 'D'] ,
				objecs : {
					name : "fan",
					age : 24,
					phone : "15626131368"
				}
			}
		});
	</script>
</body>
</html>